<!DOCTYPE html>
<html style="height: 100%;" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>hoyo</title>

<!-- Bootstrap -->
<link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
<link href="/hoyo/css/mine.css" rel="stylesheet" />
<style>
body {
	background-color: #f1f3f7;
}

.container-left {
	width: 220px;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	height: 100%;
	box-shadow: #c7ced1 0 0 5px;
	z-index:100;
}

.left-bc {
	width: 100%;
	height: 90px;
	background-image: url(img/admin-logo.png);
	background-repeat: no-repeat;
	background-position: center;
}

.left-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.left-ul li {
	display: block;
	width: 100%;
	height: 45px;
	text-align: center;
	font-size: 14px;
	font-family: "微软雅黑";
	position: relative;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	box-sizing: content-box;
}

.li-icon {
	display: inline-block;
	background-color: transparent;
}

.li-font {
	display: inline-block;
	vertical-align: top;
	line-height: 45px;
	height: 45px;
	padding-left: 19px;
	width: 75px;
	background-color: transparent;
}

.svg-icon {
	width: 23px;
	height: 23px;
	margin-top: 12px;
}

.left-li-hover {
	background-color: #37c8f7;
	border-radius: 30px;
	height: 45px;
	width: 160px;
	margin-left: 30px;
	color: #FFFFFF;
}

.container-right {
	position: relative;
	padding: 0 0 0 220px;
	height: 100%;
	padding-top: 20px;
	z-index:11;
}

.total-info {
	background-color: #FFFFFF;
	min-height: 160px;
	padding: 30px 0;
	text-align: center;
	box-shadow: #c7ced1 0 0 2px;
	margin-bottom: 20px !important;
	border-radius: 6px;
}

.total-info-div {
	height: 100px;
	padding-top: 15px;
	border-right: 1px solid #E5E9EF;
}

.total-info-icon {
	width: 45px;
	height: 45px;
}

.total-info-div-left {
	display: inline-block;
	margin-right: 12px;
	vertical-align: top;
	margin-top: 5px;
}

.total-info-div-right {
	display: inline-block;
	height: 100px;
}

.div-name {
	font-size: 16px;
}

.number {
	font-size: 36px;
	text-align: left;
}

.info-content-title {
	height: 60px;
	margin: 0 15px;
	margin-bottom: 10px;
}

.video-upload {
	background-color: #FFFFFF;
	box-shadow: #c7ced1 0 0 2px;
	border-radius: 6px;
	margin-bottom: 20px !important;
	padding-bottom: 10px;
}

.inline-block {
	display: inline-block;
}

.row {
	margin: 0;
}

.info-content-title-icon {
	width: 34px;
	height: 34px;
}

.content-font {
	height: 60px;
	line-height: 60px;
	vertical-align: top;
	font-family: "微软雅黑";
	font-size: 16px;
}

.content-logo {
	margin-top: 10px;
	margin-right: 8px;
}

.content-btn {
	border-color: #ccc;
	line-height: 60px;
}

.main-info {
	height: 180px;
	overflow: hidden;
}

.main-video-pic {
	width: 160px;
	height: 120px;
}

.clear {
	margin: 0;
	padding: 0;
}

.info-pic {
	width: 190px;
	height: 120px;
}

.main-info-content {
	font-family: "微软雅黑";
}

.main-info-content p {
	padding: 0;
	margin: 0;
	padding-top: 3px;
}

.info-intro {
	height: 40px;
	overflow: hidden;
}

.title {
	display: inline-block;
	height: 20px;
	overflow: hidden;
}

.main-info-icon {
	display: inline-block;
	margin-right: 6px;
}

.main-info-font {
	display: inline-block;
	line-height: 24px;
	height: 24px;
	width: 160px;
	overflow: hidden;
}

.main-info-icon .icon {
	vertical-align: super;
	margin-top: 3px;
}

.main-info-div {
	padding: 6px 3px;
}

.main-info-title {
	padding: 2px 0;
	height: 24px;
}

.main-info-uploader {
	padding: 2px 0;
	height: 24px;
}

.video-tousu {
	background-color: #FFFFFF;
	box-shadow: #c7ced1 0 0 2px;
	border-radius: 6px;
	margin-bottom: 20px !important;
	padding-bottom: 10px;
}

.video-report {
	background-color: #FFFFFF;
	box-shadow: #c7ced1 0 0 2px;
	border-radius: 6px;
	margin-bottom: 20px !important;
	padding-bottom: 10px;
	min-height: 361px;
}

.danmu-tr {
	height: 40px;
}

.danmu-name {
	display: inline-block;
	line-height: 30px;
	height: 30px;
	vertical-align: super;
}

.danmuReport-user1 {
	width: 80px;
	height: 36px;
	line-height: 34px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	padding: 3px 2px;
	text-align: center;
}

.danmuReport-user2 {
	width: 80px;
	height: 36px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	line-height: 34px;
	padding: 3px 2px;
	text-align: center;
}

.danmuReport-content {
	width: 230px;
	height: 36px;
	line-height: 34px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	padding: 3px 2px;
}

.danmuReport-reason {
	width: 230px;
	height: 36px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	line-height: 34px;
	padding: 3px 2px;
}

.danmuReport-action {
	width: 200px;
	height: 36px;
	overflow: hidden display: inline-block;
	box-sizing: border-box;
	line-height: 30px;
	padding: 3px 2px;
}

.danmu-table>tr>td {
	padding: 0;
	margin: 0;
	height: 40px;
}

.danmu-table {
	margin-left: 15px !important;
	margin-right: 15px !important;
	width: 920px;
}
</style>
</head>
<body style="height: 100%;">
	<div class="container-left" style="height: 100%; position: fixed;">
		<div class="left-bc"></div>
		<div>
			<ul class="left-ul">
				<li>
					<div class="left-li-hover">
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-shouye2-copy"></use>
								</svg>
						</div>
						<div class="li-font">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</div>
					</div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-weibiaoti3"></use>
								</svg>
						</div>
						<div class="li-font" ><a href="/hoyo/admin/upload">投稿管理</a></div>
					</div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-shipin7"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin/movie">视频管理</a></div>
					</div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-tousu"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/catalog">投诉管理</a></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-danmuliang"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/bullet">弹幕管理</a></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-icon47-copy"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/comment">评论管理</a></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-icon_tip_off"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/report">举报管理</a></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-quanxian-copy-copy"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/channel">频道管理</a></div>
				</li>
			</ul>
		</div>
	</div>
	<div class="container container-right">
		<div class="my-container">
			<div class="row total-info">
				<div class="col-lg-3 total-info-div">
					<div class="total-info-div-left">
						<svg class="icon total-info-icon" aria-hidden="true">
							  <use xlink:href="#icon-iconset0481"></use>
							</svg>
					</div>
					<div class="total-info-div-right">
						<div class="number">
							<span th:text="${countInfo.playAmount}">0</span>
						</div>
						<div class="div-name">
							<span>播放</span>
						</div>
					</div>
				</div>
				<div class="col-lg-3 total-info-div">
					<div class="total-info-div-left">
						<svg class="icon total-info-icon" aria-hidden="true">
							  <use xlink:href="#icon-40"></use>
							</svg>
					</div>
					<div class="total-info-div-right">
						<div class="number">
							<span th:text="${countInfo.bulletAmount}">0</span>
						</div>
						<div class="div-name">
							<span>弹幕</span>
						</div>
					</div>
				</div>
				<div class="col-lg-3 total-info-div">
					<div class="total-info-div-left">
						<svg class="icon total-info-icon" aria-hidden="true">
							  <use xlink:href="#icon-shiliangzhinengduixiang"></use>
							</svg>
					</div>
					<div class="total-info-div-right">
						<div class="number">
							<span th:text="${countInfo.commentAmount}">0</span>
						</div>
						<div class="div-name">
							<span>评论</span>
						</div>
					</div>
				</div>
				<div class="col-lg-3 total-info-div">
					<div class="total-info-div-left">
						<svg class="icon total-info-icon" aria-hidden="true">
							  <use xlink:href="#icon-crmtubiaohuaban35fuben3773"></use>
							</svg>
					</div>
					<div class="total-info-div-right">
						<div class="number">
							<span th:text="${countInfo.userAmount}">0</span>
						</div>
						<div class="div-name">
							<span>用户</span>
						</div>
					</div>
				</div>
			</div>

			<div class="row video-upload">
				<div class="info-content-title">
					<div class="inline-block content-logo">
						<svg class="icon info-content-title-icon" aria-hidden="true">
							  <use xlink:href="#icon-shipin8-copy"></use>
							</svg>
					</div>
					<div class="inline-block content-font">
						<span>最新投稿</span>
					</div>
					<div class="inline-block content-btn" style="float: right;">
						<a class="btn btn-default" href="/hoyo/admin/upload">去处理&nbsp;&gt;</a>
					</div>
				</div>
				<div class="main-info row">
					<div class="col-lg-3" th:each="catalog : ${catalogs}">
						<div>
							<img th:src="${catalog.catalogPoster}" class="info-pic" />
						</div>
						<div class="main-info-content">
							<div class="main-info-div">
								<div class="main-info-title">
									<div class="main-info-icon" title="标题">
										<svg class="icon" aria-hidden="true">
											  <use xlink:href="#icon-riji-biaoti"></use>
											</svg>
									</div>
									<div class="main-info-font" th:text="${catalog.catalogName}">
										你怀疑你不是真正的滑稽</div>
								</div>
								<div class="main-info-uploader">
									<div class="main-info-icon" title="上传者">
										<svg class="icon" aria-hidden="true">
											  <use xlink:href="#icon-yonghu"></use>
											</svg>
									</div>
									<div class="main-info-font" th:text="${catalog.nickname}">
										滑稽君</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row video-report" id="report">
				<div class="info-content-title">
					<div class="inline-block content-logo">
						<svg class="icon info-content-title-icon" aria-hidden="true">
							  <use xlink:href="#icon-icon_tip_off-copy"></use>
							</svg>
					</div>
					<div class="inline-block content-font" style="margin-right: 20px;">
						<span>举报管理</span>
					</div>
					<div class="inline-block  content-font">
						<div class="btn-group btn-group-sm">
							<button type="button" class="btn btn-success"
								v-on:click="switchReport('bullet')" id="bulletReport">弹幕举报</button>
							<button type="button" class="btn btn-default"
								v-on:click="switchReport('comment')" id="commentReport">评论举报</button>
						</div>
					</div>
					<div class="inline-block content-btn" style="float: right;">
						<span>还有{{(total-3)>0?(total-3):0}}条要处理</span> <a
							class="btn btn-default" href="/hoyo/admin/report">查看更多&nbsp;&gt;</a>
					</div>
				</div>
				<div id="danmu-report">
					<table class="table table-condensed danmu-table clear">
						<tr>
							<th>举报用户</th>
							<th>被举报用户</th>
							<th>内容</th>
							<th>原因</th>
							<th>操作</th>
						</tr>
						<tr v-for="item in items">
							<td><span class="danmuReport-user1">{{item.userNickname}}</span>
							</td>
							<td><span class="danmuReport-user2">{{item.beReportedUserNickname}}</span>
							</td>
							<td><span class="danmuReport-content">{{item.content}}</span></td>
							<td><span class="danmuReport-reason">{{item.description}}</span></td>
							<td>
								<div class="btn-group btn-group-sm danmuReport-action">
									<!-- 按钮触发模态框 -->
									<button class="btn btn-danger btn-lg" data-toggle="modal"
										v-on:click="showMessage('0', item.id)">封号</button>
									<button class="btn btn-warning btn-lg" data-toggle="modal"
										v-on:click="showMessage('1', item.id)">禁言</button>
									<button class="btn btn-primary btn-lg" data-toggle="modal"
										v-on:click="showMessage('-1', item.id)">不处理</button>
										<!-- data-target="#myModal" -->
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="padding-top: 200px;"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">通知</h4>
				</div>
				<div class="modal-body" id="messageBody">确定执行该动作吗？</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" id="closeBtn">关闭</button>
					<button type="button" class="btn btn-primary" id="ensureBtn">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
<script src="/hoyo/js/bootstrap.min.js"></script>
<script src="/hoyo/js/vue.js"></script>
<script src="/hoyo/js/iconfont.js"></script>
<script>
	$(function() {
		$("#closeBtn").click(function(){
			$("#myModal").modal("hide");
			$("#ensureBtn").css("display", "");
		});
		
		$("#ensureBtn").click(function(){
			console.log("id="+reportVM.id+"&userId="+reportVM.userId+"&actionType="+reportVM.actionType);
			$.post({
				url:"/hoyo/admin/"+reportVM.type+"/reportHandle",
				data:"id="+reportVM.id+"&userId="+reportVM.userId+"&actionType="+reportVM.actionType,
				success:function(data){
					var result = JSON.parse(data);
					console.log(result);
					$("#ensureBtn").css("display", "none");
					if(result.success){
						reportVM.items = result.pageInfo.list;
						reportVM.total = result.pageInfo.total;
						Messenger.show("操作成功");
					}else{
						Messenger.show("操作失败");
					}
				}
			});
		});
		
		var reportVM = new Vue({
			el : "#report",
			data : {
				items : [],
				total : 0,
				type : 'bullet',
				actionType: 233,
				userId: 0,
				id: 0
			},
			created : function() {
				var vm = this;
				$.get({
					url : "/hoyo/admin/bullet/beReported",
					data : "pageNum=1&pageSize=3",
					success : function(data) {
						var result = JSON.parse(data);
						console.log(result);
						if (result.success) {
							vm.items = result.pageInfo.list;
							vm.total = result.pageInfo.total;
						} else {

						}
					}
				});
			},
			methods : {
				switchReport : function(type) {
					if (this.type == type) {
						return;
					}
					this.type = type;
					if ("bullet" == type) {
						$("#bulletReport").attr("class", "btn btn-success");
						$("#commentReport").attr("class", "btn btn-default");
					} else {
						$("#bulletReport").attr("class", "btn btn-default");
						$("#commentReport").attr("class", "btn btn-success");
					}
					var vm = this;
					$.get({
						url : "/hoyo/admin/" + type + "/beReported",
						data : "pageNum=1&pageSize=3",
						success : function(data) {
							var result = JSON.parse(data);
							console.log(result);
							if (result.success) {
								vm.items = result.pageInfo.list;
								vm.total = result.pageInfo.total;
							} else {

							}
						}
					});
				},
				showMessage: function(type, id){
					//console.log(type);
					var message = "";
					this.actionType = type
					this.id = id;
					var itm = {};
					this.items.forEach(function(item){
						if(item.id==id){
							itm = item
						}
					});
					this.userId = itm.beReportedUserId; 
					if(type == 0){
						message = "确定要对用户"+itm.beReportedUserNickname+"执行封号操作？";
					}else if(type == 1){
						message = "确定要对用户"+itm.beReportedUserNickname+"执行禁言操作？";
					}else if(type == -1){
						message = "确定不作处理？";
					}
					Messenger.show(message);
				}
			}
		});
	});
	
	var Messenger = {	
		show: function(message){
			$("#messageBody").html(message);
			$("#myModal").modal("show");
		}
	};
</script>
</html>
